<template>
  <div>
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="$router.go(-1)"
      :right-text="auditBtn"
      @click-right="editApply()"
    />

    <div>
      <div class="headerbox">
        <div
          class="header_top"
          :style="{ width: columns.length * 3 + 'rem' }"
          v-if="columns && columns.length != 0"
        >
          <div
            class="header_item"
            v-for="(item, index) in columns"
            :key="index"
            @click="handleClick(index)"
            :class="tabIndex == index ? 'active' : ''"
          >
            <div class="txt">{{ item.number }}</div>
            <div class="txt1">{{ item.bizDate }}</div>
          </div>
        </div>
      </div>

      <div class="carInfo">
        <div class="carInfo_title">出库信息</div>
        <div class="carInfo_item">出库单单号：{{ dataSource.billNumber }}</div>
        <div class="carInfo_item">出库类型：{{ dataSource.bizType }}</div>
        <div class="carInfo_item">出库日期：{{ dataSource.bizDate }}</div>
        <div class="carInfo_item">单据状态：{{ dataSource.billStatus }}</div>
        <div class="carInfo_item">入库仓库：{{ dataSource.brand }}</div>
        <div class="carInfo_item">所属品牌：{{ dataSource.brandName }}</div>
        <div class="carInfo_item">
          展厅/维修中心：{{ dataSource.showOrgName }}
        </div>
        <div class="carInfo_item">备注：{{ dataSource.remark }}</div>
        <div class="carInfo_item">其他事项：{{ dataSource.otherMatters }}</div>
      </div>

      <div class="carInfo">
        <div class="carInfo_title">车辆信息</div>
        <div class="carInfo_item">销售合同号：{{ dataSource.payerName }}</div>
        <div class="carInfo_item">车架号：{{ dataSource.vinCode }}</div>
        <div class="carInfo_item">车辆公里数：{{ dataSource.carMiles }}</div>
        <div class="carInfo_item">钥匙数量：{{ dataSource.key }}</div>
        <div class="carInfo_item">
          寄售车辆：{{ dataSource.consignmentCar ? "是" : "否" }}
        </div>
      </div>
      <div class="carInfo">
        <div class="carInfo_title">销售顾问确认信息</div>
        <div class="checkbox">
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isCheck"
              icon-size="12"
              shape="square"
              disabled
            >
              整车检查完毕
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isPropertOk"
              icon-size="12"
              shape="square"
              disabled
            >
              车内配置完好
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isTookOk"
              icon-size="12"
              shape="square"
              disabled
            >
              随车工具齐全
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isSurfaceOk"
              icon-size="12"
              shape="square"
              disabled
            >
              外观完好无损
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isPaintColorOk"
              icon-size="12"
              shape="square"
              disabled
            >
              外观漆面无色差
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isNameplate"
              icon-size="12"
              shape="square"
              disabled
            >
              名牌(含生产日期)
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isSaleContract"
              icon-size="12"
              shape="square"
              disabled
            >
              销售合同
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isSupply"
              icon-size="12"
              shape="square"
              disabled
            >
              补充协议
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isCard"
              icon-size="12"
              shape="square"
              disabled
            >
              刷卡单
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isAddpart"
              icon-size="12"
              shape="square"
              disabled
            >
              选装件
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isInsurance"
              icon-size="12"
              shape="square"
              disabled
            >
              保险
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isCarlicense"
              icon-size="12"
              shape="square"
              disabled
            >
              委托上牌
            </van-checkbox>
          </div>
        </div>
        <div class="carInfo_item">车身外观情况：{{ dataSource.carLooks }}</div>
        <div class="carInfo_item">
          质损或缺件情况：{{ dataSource.breakOrLoss }}
        </div>
      </div>
      <div class="carInfo">
        <div class="carInfo_title">财务确认信息</div>
        <div class="checkbox">
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isCarAmt"
              icon-size="12"
              shape="square"
              disabled
            >
              车款
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isPartAmt"
              icon-size="12"
              shape="square"
              disabled
            >
              配件款
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isOtherAmt"
              icon-size="12"
              shape="square"
              disabled
            >
              其他费用
            </van-checkbox>
          </div>
          <div class="check_item">
            <van-checkbox
              v-model="dataSource.isPayAmt"
              icon-size="12"
              shape="square"
              disabled
            >
              代付款证明
            </van-checkbox>
          </div>
        </div>
      </div>

      <div class="goBack" @click="goBack">返回</div>
      <!-- 审核情况 -->
      <AuditRecord
        :visible="auditVisible"
        :billId="dataSource.billId ? dataSource.billId : detailId"
        @close="auditVisible = false"
      ></AuditRecord>
    </div>
  </div>
</template>

<script>
import sellManageApi from "@/api/sellManageApi";
import { Checkbox } from "vant";
import AuditRecord from "@/components/AuditRecord";
export default {
  data() {
    return {
      active: "",
      detailId: "", // 当前单据ID
      orderId: "", // 当前合同订单ID
      desBosType: "", // 单据类型 desBosType
      columns: [],
      tabIndex: 0,
      dataSource: {
        billId: "", //单据Id
        billNumber: "", //出库单编号
        bizDate: "", //出库日期
        bizType: "", //出库类型
        billStatus: "", //出库状态
        brandName: "", //所属品牌
        showOrgName: "", //展厅\维修中心
        remark: "", //备注
        otherMatters: "", //其他事项
        payerName: "", //销售合同号
        vinCode: "", //车架号
        carMiles: "", //车辆公里数
        key: "", //钥匙数量
        consignmentCar: "", //寄售车辆
        isCheck: "", //整车检查完毕
        isPropertOk: "", //车内配置完好
        isTookOk: "", //随车工具齐全
        isSurfaceOk: "", //外观完好无损
        isPaintColorOk: "", //外观漆面无色差
        isNameplate: "", //铭牌含生产日期
        isSaleContract: "", //销售合同
        isSupply: "", //补充协议
        isCard: "", //刷卡单
        isAddpart: "", //选装件
        isInsurance: "", //保险
        isCarlicense: "", //委托上牌
        carLooks: "", //车身外观情况
        breakOrLoss: "", //质损或缺件说明
        isCarAmt: "", //车款
        isPartAmt: "", //配件款
        isOtherAmt: "", //其他费用
        isPayAmt: "", //代付款证明
      },
      auditBtn: "",
      auditVisible: false,
    };
  },
  components: { Checkbox, AuditRecord },
  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId;
      this.orderId = this.$route.query.orderId;
      this.desBosType = this.$route.query.desBosType;
      console.log(this.detailId);
      console.log(this.orderId);
      console.log(this.desBosType);
      this.getList(this.orderId);
    }
  },
  methods: {
    getDetail() {
      sellManageApi
        .secondHandCarFacade({
          method: "getSaleIssuedDataById", //固定值
          billId: this.columns[this.tabIndex].billId, //单据Id，必填，String
        })
        .then((res) => {
          if (res.code == 1) {
            this.dataSource = res.data;
            if (this.dataSource.billStatus == "保存") {
              this.auditBtn = "编辑";
            } else {
              this.auditBtn = "审批情况";
            }
          }
        });
    },
    getList() {
      // 根据类型ID获取单据列表
      sellManageApi
        .secondHandCarFacade({
          method: "getDestInfoBySourceIdAndDestBosType", //固定值
          userId: "", //用户ID，必填，String
          orgId: "", //登录组织Id，必填，String
          billId: this.orderId, //单据Id，必填，String
          desBosType: this.desBosType,
        })
        .then((res) => {
          if (res.code == 1) {
            if (res.data.length >= 1) {
              this.columns = res.data;
              this.getDetail();
            } else {
              this.$toast.fail("暂无该单据");
            }
          } else {
            this.$toast.fail("暂无该单据");
          }
        });
    },
    handleClick(index) {
      this.tabIndex = index;
      this.getDetail();
    },
    goBack() {
      this.$router.go(-1);
    },
    editApply() {
      if (this.dataSource.billStatus == "保存") {
        this.$router.push({
          path: "/SaleIssuedEdit",
          query: {
            billId: this.columns[this.tabIndex].billId,
            orderId: this.orderId,
            billNumber: this.billNumber,
          },
        });
      } else {
        this.auditVisible = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.headerbox {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.header_top {
  display: flex;
  align-self: center;
  padding: 0.2rem;
  overflow-x: auto;
  // width: 12rem;
  .header_item {
    width: 3rem;
    background: #fff;
    padding: 0.2rem 0.3rem;
    font-size: 0.32rem;
    border-radius: 5px;
    margin-right: 0.2rem;
    .txt {
      margin-bottom: 0.1rem;
    }
    &.active {
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
  }
}
.carInfo {
  padding: 0.2rem;
  background: #fff;
  margin-bottom: 0.2rem;
  .source {
    padding-left: 0 !important;
    margin-bottom: 0.2rem;
    justify-content: space-between;

    .source_txt {
      font-size: 0.32rem;
    }
  }

  .carInfo_No {
    margin-bottom: 0.3rem;
    .carInfo_No_item {
      border-right: 1px solid #ccc;
      padding-right: 0.1rem;
      margin-right: 0.1rem;
      font-size: 0.32rem;
      color: #333;
      &:last-child {
        border: none;
      }
    }
  }
  .carInfo_item {
    font-size: 0.32rem;
    margin-bottom: 0.1rem;
    color: #333;
    .carInfo_item_price {
      width: 50%;
    }
  }
  .carInfo_title {
    font-size: 0.32rem;
    color: #333;
    margin-bottom: 0.2rem;
    font-weight: bold;
  }
}
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 0.32rem;
  margin: auto;
  border-radius: 5px;
  padding: 0.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .van-checkbox__label--disabled {
    color: #333;
  }
  /deep/ .van-checkbox__icon--disabled .van-icon {
    background: none;
  }
  .check_item {
    font-size: 0.32rem;
    color: #333;
    width: 33.33%;
  }
}
</style>
